import ReactAceEdit from "./ReactAceEdit.js";
import "../assets/css/skulptPage.css";
import React,{ useState, useEffect,Component } from "react";
export default class SkulptPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputText:'', // python代码输入区
output:'',//结果输出区
isShow:true 
    }
  }
  componentWillMount() {
      import("ace-builds/src-noconflict/mode-python");
    import("ace-builds/src-noconflict/snippets/python");
    require("skulpt-master/dist/skulpt.min.js")
    require("skulpt-master/dist/skulpt-stdlib.js")
    window.Sk.configure({
      // 配置使用Python3
      __future__: window.Sk.python3,
      // 配置输出信息
      output: (text) => {
        this.setState({output:text})
        console.log(text);
      },
      read: function (filename) {
        
        if (window.Sk.builtinFiles === undefined ||
          window.Sk.builtinFiles["files"][filename] === undefined) {
            console.log("File not found: '" + filename + "'")
          throw "File not found: '" + filename + "'";
        }
        console.log(filename)
        console.log(window.Sk.builtinFiles["files"][filename])
        return window.Sk.builtinFiles["files"][filename];
      }
  });
  }
  runit() {
    console.log("执行");
    let TurtleGraphics = {
      target: "output_canvas",
      class: 'box100',
      width: 400,
      height: 400
    }
    window.Sk.TurtleGraphics=TurtleGraphics
    // 返回一个Promise进行异步调用，执行死循环程序的时候会有问题，停不下来，后续需要解决如何停止异步调用
    var myPromise = window.Sk.misceval.asyncToPromise( ()=> {
      this.setState({output:''})
      return window.Sk.importMainWithBody("<stdin>", false, this.state.inputText, true);
    });
    console.log(window.Sk);
    myPromise.then((mod)=> {
    console.log('程序执行完成！');
    },  (err)=> {
      this.setState({output:err.toString()})
    console.log(err.toString());
    });
  }
  SetInputText(val) {
    this.setState({inputText:val})
  }
  SetIsShow() {
    console.log(123,this.state.isShow)
    this.setState({isShow:!this.state.isShow})
  }
  render() {
    return (
      <div className="u-f box100">
        <ReactAceEdit
          mode="python"
          value={this.state.inputText}
          SetInputText={this.SetInputText.bind(this)}
          className="flex1"
          runit={this.runit.bind(this)}
          SetIsShow={this.SetIsShow.bind(this)}
        />
        <div className="u-f u-fdc output_panel" style={{display: this.state.isShow?'flex':'none'}}>
          <div className="output flex1">{ this.state.output}</div>
          <div className="output_canvas" id="output_canvas">456</div>
        </div>
      </div>
    );
  }
}
// const SkulptPage = (props) => {
//   import("ace-builds/src-noconflict/mode-python");
//   import("ace-builds/src-noconflict/snippets/python");
//   require("skulpt-master/dist/skulpt.min.js")
//   require("skulpt-master/dist/skulpt-stdlib.js")
//   // python代码输入区
//   const [inputText, setInputText] = useState("");
//   //结果输出区
//   const [output, setOutput] = useState('')
//   const [isShow,setIsShow]=useState(true)
//   function SetInputText(val) {
//     console.log(555)
//     setInputText(val)
//   }
//   function SetOutput(val) {
//     setOutput(val)
//   }
//   function SetIsShow() {
//     console.log(123)
//     setIsShow(isShow=>!isShow)
//   }
//   function runit() {
//    (window.Sk.TurtleGraphics || (window.Sk.TurtleGraphics = {})).target = 'output_canvas'
//     // 返回一个Promise进行异步调用，执行死循环程序的时候会有问题，停不下来，后续需要解决如何停止异步调用
//     var myPromise = window.Sk.misceval.asyncToPromise(function () {
//       setOutput("")
//       return window.Sk.importMainWithBody("<stdin>", false, inputText, true);
//     });
//     myPromise.then(function(mod) {
//     console.log('程序执行完成！');
//     }, function (err) {
//     setOutput(err.toString())
//     console.log(err.toString());
//     });
//   }
//   useEffect(() => {
    
//     console.log(window.Sk)
//     window.Sk.configure({
//       // 配置使用Python3
//       __future__: window.Sk.python3,
//       // 配置输出信息
//       output: SetOutput,
//       read: function (filename) {
//         if (window.Sk.builtinFiles === undefined ||
//           window.Sk.builtinFiles["files"][filename] === undefined) {
//           throw "File not found: '" + filename + "'";
//         }
//         return window.Sk.builtinFiles["files"][filename];
//       }
//   });
  
//   }, []);
//   return (
//     <div className="u-f box100">
//       <ReactAceEdit
//         mode="python"
//         value={inputText}
//         SetInputText={SetInputText}
//         runit={runit}
//         SetIsShow={SetIsShow}
//         className="flex1"
//       />
//       <div className="u-f u-fdc output_panel" style={{display:isShow }}>
//         <div className="output flex1" id="output">{output}</div>
//         <div className="output_canvas" id="output_canvas">456</div>
//       </div>
//     </div>
//   );
// };
// export default SkulptPage;
